<script>
import {ref, inject, h, defineComponent } from "vue";
import {
  BookmarkOutline,
  BookOutline as BookIcon,
  CaretDownOutline,
  PersonCircleOutline as UserIcon,
  Pencil as EditIcon,
  LogOutOutline as LogoutIcon
} from "@vicons/ionicons5"
import { NIcon } from "naive-ui";
import {RouterLink} from "vue-router";
import {outLogin} from "@/res/api/user_api.js";
export default defineComponent({
  name: "admin-communal",
  props: {
    nav:{
      type:String,
      default: 'courses'
    },
  },
  setup(){
    const {toPage} = inject('toPage')
    const { dark } = inject('dark')
    function renderIcon(icon) {
      return () => h(NIcon, null, { default: () => h(icon) });
    }
    const menuOptions = [
      {
        label: ()=>h(
            RouterLink,
            {
              to: {
                name: "admin/course"
              }
            },{default: () => "课程管理"}),
        key: "courses",
        icon: renderIcon(BookIcon),
        children: [
          {
            label: () => h(
                RouterLink,
                {
                  to: {
                    name: "admin/course/info",
                  }
                },
                { default: () => "课程信息" }
            ),
            key: 'courses-info',
            icon: renderIcon(BookIcon)
          },
          {
            label: () => h(
                RouterLink,
                {
                  to: {
                    name: "admin/course/add",
                  }
                },
                { default: () => "添加课程" }
            ),
            key: 'courses-add',
            icon: renderIcon(BookIcon)
          }
        ]
      },
      {
        label: () => h(
            RouterLink,
            {
              to: {
                name: "admin/users",
              }
            },
            { default: () => "用户管理" }
        ),
        key: "users",
        icon: renderIcon(BookIcon),
        children: [
          {
            label: () => h(
                RouterLink,
                {
                  to: {
                    name: "admin/users/ban",
                  }
                },
                { default: () => "用户封禁" }
            ),
            key: 'users-ban',
            icon: renderIcon(BookIcon)
          },
          {
            label: () => h(
                RouterLink,
                {
                  to: {
                    name: "admin/users/record",
                  }
                },
                { default: () => "封禁历史" }
            ),
            key: 'users-ban-record',
            icon: renderIcon(BookIcon)
          }
        ]
      },
      {
        label: () => h(
            RouterLink,
            {
              to: {
                name: "admin/article",
              }
            },
            { default: () => "文章审核" }
        ),
        key: "articles",
        icon: renderIcon(BookIcon),
        children: [
          {
            label: () => h(
                RouterLink,
                {
                  to: {
                    name: "admin/article",
                  }
                },
                { default: () => "审核申请" }
            ),
            key: 'article-apply',
            icon: renderIcon(BookIcon)
          },
          {
            label: () => h(
                RouterLink,
                {
                  to: {
                    name: "admin/article",
                  }
                },
                { default: () => "审核记录" }
            ),
            key: 'article-log',
            icon: renderIcon(BookIcon)
          }
        ]
      },

    ];
    const dropdownOption = [
      {
        label: "用户资料",
        key: "profile",
        icon: renderIcon(UserIcon)
      },
      {
        label: "编辑用户资料",
        key: "editProfile",
        icon: renderIcon(EditIcon)
      },
      {
        label: "退出登录",
        key: "logout",
        icon: renderIcon(LogoutIcon),
      }
      ]


    function handleSelect(key) {
      if(key===dropdownOption[2].key){
        //退出登录
        outLogin().then((res) => {
          $message.destroyAll()
          $message.success(res.message)
          sessionStorage.clear()   //清除所有session值
          localStorage.clear()     //清除所有localStorage值
          dark()
          window.location.reload()
        })
      }else if(key === dropdownOption[1].key){
        $message.info("xu")
      }else {
        $message.info("yu")
      }
    }
    return{
      toPage,
      collapsed: ref(true),
      menuOptions,
      options: dropdownOption,
      handleSelect
    }
  }
})

</script>

<template>
  <n-layout :native-scrollbar="false" class="layout">
    <n-layout-header class="admin-header" bordered>
      <n-grid cols="12" x-gap="8" style="height: 100%">
        <n-gi offset="1">
          <n-space style="height: 100%" justify="center" align="center">
            <n-image
                @click="toPage()"
                preview-disabled
                width="81"
                src="/src/assets/picture/Linter.png"
            />
          </n-space>
        </n-gi>
        <n-gi offset="8" span="1">
          <n-dropdown :options="options" @select="handleSelect" :show-arrow="true">
            <n-space style="height: 100%" justify="center" align="center">
              <n-avatar
                  round
                  size="medium"
                  src="https://picsum.photos/seed/picsum/200/300"
              /> username
            </n-space>
          </n-dropdown>
        </n-gi>
        <n-gi class="item-center">
          <dark-util/>
        </n-gi>
      </n-grid>
    </n-layout-header>
    <n-layout has-sider :native-scrollbar="false" class="layout-sider">
      <n-layout-sider class="layout-sider"
                      bordered
                      collapse-mode="width"
                      :collapsed-width="64"
                      width="15rem"
                      :collapsed="collapsed"
                      @mouseover="collapsed = false"
                      @mouseleave="collapsed = true"
      >
        <n-menu
            v-model:value="nav"
            accordion
            :collapsed="collapsed"
            :collapsed-width="64"
            :collapsed-icon-size="24"
            :options="menuOptions"
        />
      </n-layout-sider>
      <n-layout-content :native-scrollbar="false"  content-style="padding: 24px;">
        <slot/>
      </n-layout-content>
    </n-layout>
    <n-layout-footer>
      <n-space justify="center">到底了哦~</n-space>
    </n-layout-footer>
  </n-layout>
</template>

<style lang="scss" scoped>
.header-img{
  width: 5rem;
  height: 1.6rem;
}
.admin-header{
  width: 100%;
  height: 64px;
}
</style>
